<template>
    <div>
        <Divider orientation="left">页面标题</Divider>
        <PageTitle title="DEMO示例"></PageTitle>
        
        <Divider orientation="left">表格</Divider>
        <SuperTable :columns="tableColumns" :default-data="tableDdata" :auto="false">
            <Button slot="header-left" type="primary">新增</Button>
            <Form slot="header-right" inline>
                <FormItem label="Title">
                    <Input></Input>
                </FormItem>
                <FormItem label="Gender">
                    <RadioGroup>
                        <Radio label="male">Male</Radio>
                        <Radio label="female">Female</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="City">
                    <Select placeholder="Select your city">
                        <Option value="beijing">New York</Option>
                        <Option value="shanghai">London</Option>
                        <Option value="shenzhen">Sydney</Option>
                    </Select>
                </FormItem>
                <Button type="primary">查询</Button>
            </Form>
            
            <template slot-scope="{row, column, index}" slot="address">
                <span>地址：{{ row.address }}</span>
            </template>
            
            <span slot="page-left">分页左侧</span>
        </SuperTable>
        <!-- <SuperTable path="" :columns="tableColumns" fixed-footer>
            <span slot="header-left">头部左侧</span>
            <span slot="header-right">头部右侧</span>
            
            <template slot-scope="{row, column, index}" slot="address">
                <span>地址：{{ row.address }}</span>
            </template>
            
            <span name="page-left">底部左侧</span>
        </SuperTable> -->
        
        <Divider orientation="left">底部栏</Divider>
        <FooterBar :fixed="false">
            <Button slot="left">删除</Button>
            <div class="ui-btns">
                <Button>返回</Button>
                <Button type="primary">下一步</Button>
            </div>
            <Button slot="right">删除</Button>
        </FooterBar>
        
        <Divider orientation="left">修改弹窗样式</Divider>
        <Button type="primary" @click="showModal = true">打开弹窗</Button>
        <Modal
            title="弹窗示例"
            v-model="showModal"
            class-name="ui-mid-pop"
        >
            <Form label-position="top">
                <FormItem label="数据库类型">
                    <Select placeholder="请选择">
                        <Option value="mysql">MySQL</Option>
                        <Option value="db">db</Option>
                    </Select>
                </FormItem>
                <FormItem label="服务器地址" error="请输入服务器数据库地址">
                    <Input placeholder="请输入服务器数据库地址，如：127.0.0.1"></Input>
                </FormItem>
                <FormItem label="Title">
                    <Input></Input>
                </FormItem>
                <FormItem label="Gender">
                    <RadioGroup>
                        <Radio label="male">Male</Radio>
                        <Radio label="female">Female</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            
            <div slot="footer" style="display: flex; justify-content: space-between;">
                <Button type="warning" @click="showModal = false">测试连接</Button>
                <div class="ui-btns">
                    <Button type="default" @click="showModal = false">关闭</Button>
                    <Button type="info" @click="showModal = false">提交</Button>
                </div>
            </div>
        </Modal>
        
        <Divider orientation="left">文件上传</Divider>
        <BaseUpload></BaseUpload>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
import FooterBar from '@/components/utils/footer-bar.vue';
import BaseUpload from '@/components/form/base-upload.vue';
export default {
    components: {
        SuperTable,
        FooterBar,
        BaseUpload
    },
    data() {
        return {
            showModal: false,
            tableColumns: [
                { title: '姓名', key: 'name' },
                { title: '年龄', key: 'age' },
                { title: '地址', key: 'address', slot: 'address' }
            ],
            tableDdata: [
                { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' },
                { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' },
                { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' },
                { name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' }
            ]
        }
    }
}
</script>